﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SignalR流读写</title>
</head>
<body>
    <button id="send">发送并获取返回</button>
    <button id="enumerableReturn">迭代返回</button>
    <button id="channelWrite">渠道回写</button>
    <ol id="messagesList"></ol>

    <script src="./signalr.js"></script>
    <script>
        const __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
            return new (P || (P = Promise))(function (resolve, reject) {
                function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
                function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
                function step(result) {
                    if (result instanceof Promise) { result.then(r => { r.done ? resolve(r.value) : new P(function (resolve) { resolve(r.value); }).then(fulfilled, rejected); }).catch(e => reject(e)) }
                    else { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
                }
                step((generator = generator.apply(thisArg, _arguments || [])).next());
            });
        };
        function createUUID() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        // 链接到自己的hub 初始化 路由：/streaming 被路由节点捕获
        let connection = new signalR.HubConnectionBuilder()
            .withUrl("/streaming")
            .build();
        connection.start().then(() => {
            console.log("已建立链接");
        });

        connection.on('ClientHook', data => console.log("服务器回调", data));

        let btnSend = document.querySelector('#send');
        btnSend.addEventListener('click', event => {
            __awaiter(this, void 0, void 0, function* () {
                const subject = new signalR.Subject();
                yield connection.send("StreamingReadWithReturn", subject);

                var iteration = 0;
                const intervalHandle = setInterval(() => {
                    iteration++;
                    subject.next(iteration.toString());
                    if (iteration === 10) {
                        clearInterval(intervalHandle);
                        subject.complete();
                    }
                }, 500);
                event.preventDefault();
            });
        });

        let btnEnumerableReturn = document.querySelector('#enumerableReturn');
        let messagesList = document.getElementById("messagesList");
        btnEnumerableReturn.addEventListener('click', event => {
            __awaiter(this, void 0, void 0, function* () {
                // EnumerableReturn
                try {
                    messagesList.innerHTML = '';
                    connection.stream("EnumerableReturn", 10, 500)
                        .subscribe({
                            next: (item) => {
                                var li = document.createElement("li");
                                li.textContent = item;
                                messagesList.appendChild(li);
                            },
                            complete: () => {
                                var li = document.createElement("li");
                                li.textContent = "Stream completed";
                                messagesList.appendChild(li);
                            },
                            error: (err) => {
                                var li = document.createElement("li");
                                li.textContent = err;
                                messagesList.appendChild(li);
                            },
                        });
                }
                catch (e) {
                    console.error(e.toString());
                }
                event.preventDefault();
            });
        });

        let btnChannelWrite = document.querySelector('#channelWrite');
        btnChannelWrite.addEventListener('click', event => {
            __awaiter(this, void 0, void 0, function* () {
                // ChannelWrite
                try {
                    messagesList.innerHTML = '';
                    connection.stream("ChannelWrite", 10, 500)
                        .subscribe({
                            next: (item) => {
                                var li = document.createElement("li");
                                li.textContent = item;
                                messagesList.appendChild(li);
                            },
                            complete: () => {
                                var li = document.createElement("li");
                                li.textContent = "Stream completed";
                                messagesList.appendChild(li);
                            },
                            error: (err) => {
                                var li = document.createElement("li");
                                li.textContent = err;
                                messagesList.appendChild(li);
                            },
                        });
                }
                catch (e) {
                    console.error(e.toString());
                }
                event.preventDefault();
            });
        });
    </script>
</body>
</html>
